<template>
	<view class="home-content" id="homeContent">
		<RTitle title="兔叮跑腿" openType="switchTab" url="/pages/plat_menu/index"/>
		<view class="m-detection">
			<view class="detec-img"></view>
			<view class="m-detec-msg">配送人员今日体温监测正常</view>
		</view>
		<userinfo :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<view class="map-box">
			<map id="mapIndex" class="m-map-index"  :scale="nowMap.zoom" :markers="markers" :longitude="nowMap.center.lng" :latitude="nowMap.center.lat" @regionchange="mapChange">
				<cover-view v-if="!hideSelfBtn" class="icon-gerenzhongxin iconfont block-in" @click="goMy"></cover-view>
				<cover-view class="center-icon" v-if="!sendStart"></cover-view>
				<cover-view class="center-desc" v-if="!sendStart && !isdraging">附近有{{ deliverList.length }}位骑手等待为您服务</cover-view>
				<cover-view class="icon-sanjiaoB iconfont block-in" v-if="!sendStart && !isdraging"></cover-view>
				<cover-view class="re-location" @click="relocation" v-if="!sendStart">
					<!-- <cover-image class="img" src="static/images/location_set.png"></cover-image> -->
				</cover-view>
				<cover-view class="clear-address" v-if="sendStart != ''" @click="clearAddress">
					<cover-view class="icon-left1 iconfont block-in"></cover-view>
					清除地址
				</cover-view>
			</map>
		</view>
		<view class="input-wrapper" id="inputWrapper">
			
			
			<view class="input-box">
				<view class="title">
					<text class="item" :class="sendType == item.type && sendTypeCurrentId == item.cid? 'active' : ''" @click="selectType(item.type,item.cid)" v-for="item in runConfig.catList" :key="item.cid">{{item.cat_name}}</text>
				</view>
				<view class="tab-content" id="tabContent">
					<view class="send-box" id="sendBox" v-if="sendType == 3">
						<AddressInput addressDesc="从哪里发出" type="sendStart" :addressTag="addressTag" :showAddressTag="showAddressTag" addressFrom="send" :addressInfo="sendStart" @selectAddressTag="selectAddressTag" @checkLogin="checkLogin">
						</AddressInput>
						<AddressInput addressDesc="送到哪里去" type="sendEnd" addressFrom="receive" :addressInfo="sendEnd" @checkLogin="checkLogin"></AddressInput>
						<SelectGoods :showTxt="sendGoods.showTxt" @checkLogin="checkLogin"/>
					</view>
					<view class="buy-box" v-if="sendType == 2" @click="clickShowBuyMask">
						<view class="text-box">
							<view class="text">
								<text v-if="goodsDesc">{{ goodsDesc }}</text>
								<text v-else class="placeholder">输入想买的商品，如：1杯星巴克拿铁</text>
							</view>
							<view class="btn" @click="buyGoConfirm('judge')">下单</view>
						</view>
						<view class="icon-box" id="iconBox">
							<view class="item" v-for="item in goodsTypeList" :key="item.name">
								<view class="img-box"><image class="img" :src="item.img" mode=""></image></view>
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="buy-mask" :class="{ active: showBuyMask }">
			<view class="cancel" @click="clickShowBuyMask(false)"><text class="icon-chahao iconfont"></text></view>
			<view class="buy-box">
				<view class="text-box">
					<view class="text">
						<textarea class="input-goods" maxlength="100" placeholder="点击输入你的商品要求，例如糖炒栗子1斤" @input="inputGoodsDesc" v-model="goodsDesc"></textarea>
					</view>
					<view class="btn" @click="buyGoConfirm">下单</view>
				</view>
				<view class="type-box" v-if="goodsTypeList.length > 0">
					<view class="title">
						<text class="item" :class="{ active: index === typeNameActive }" v-for="(item, index) in goodsTypeList" :key="'tag_'+item.id" @click="selectGoodsType(index)">{{ item.name }}</text>
					</view>
					<!-- 店铺 -->
					<view class="list" style="padding-left: 0;" key='shop'  v-if="goodsTypeList[typeNameActive].type == 1" >
						<view v-if="goodsTypeList[typeNameActive].goods.length" class="shop-tips">以下信息仅供参考,下单前请自行与商家联系。</view>
						<view v-else class="shop-tips">暂无推荐</view>
						<view  class="shop-list"  @click="selectShop(item)" v-for="(item, index) in goodsTypeList[typeNameActive].goods" :key="index">
							<shop-item :shop="item"></shop-item>
						</view>
						
					</view>
					<!-- 商品 -->
					<view class="list" v-else  key='goods'>
						<view v-if="goodsTypeList[typeNameActive].goods.length">
							<text class="item"  @click="selectGoods(item.name)" v-for="(item, index) in goodsTypeList[typeNameActive].goods" :key="index">{{ item.name }}</text>
						</view>
						<view v-else class="shop-tips">暂无推荐</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mf-call-phone" @click="callServe">
			<view>拨打电话</view>
			<view>随叫随到</view>
		</view>
	</view>
</template>

<script>
import RTitle from './components/r-title.vue'
import AddressInput from './components/AddressInput';
import SelectGoods from './components/SelectGoods';
import ShopItem from './components/ShopItem.vue';
import common from '../../utils/common.js';

var app = getApp();
var _this;
var systemInfo;
export default {
	name: 'index',
	data() {
		return {
			servePhone:'',
			sendType: 2, // 2表示"帮我买"，3表示"帮我送"
			sendTypeCurrentId: '', // 当前选中的跑腿类型id
			isSend: true, // true表示"帮我送"，false表示"帮我买"
			mapH: 'height:405px', // 地图组件高度
			isFirst: true, // 是否第一次打开页面
			goodsTypeList: [], // 帮我买商品推荐列表
			typeNameActive: 0, // "帮我买"选择物品分类
			showBuyMask: false, // 显示"帮我买"弹窗
			goodsDesc: '', // "帮我买"填写的商品描述
			showAddressTag: true, // 是否显示提示地址
			showAddressClear: false, // 是否显示地址清除按钮
			nowMap: {
				// 地图配置
				center: { lng: 125.67, lat: 43.52 }, // 地图中心点位置
				zoom: 15 // 地图缩放级别
			},
			current: { lng: 125.67, lat: 43.52 }, // 用户当前定位坐标
			deliverList: [], // 附近配送员列表
			isdraging: false, // 是否拖拽地图当前位置标记
			sendStart: '', // 帮我送初始地址
			sendEnd: '', // 帮我送结束地址
			addressTag: '', // 帮我送地址提示
			sendGoods: {
				showTxt: ''
			}, // 帮我送商品信息
			mapContext: '', // 地图组件对象
			markers: [], // 地图上的所有marker
			deliverMarkers: [], // 地图上的骑手坐标
			addressMarkers: [], // 地图上起始地址的坐标
			user_options: {},
			runConfig: {}, // 跑腿配置信息
			hideSelfBtn: false, // true隐藏左上角个人中心按钮
		};
	},
	// 分享
	onShareAppMessage() {
		let pageLink = '/pages/runErrands/index'
		pageLink = common.addShareParam(pageLink)
	  if (_this.runConfig.page_share_title && _this.runConfig.page_share_title != '') {
	    return {
	      title: _this.runConfig.page_share_title,
	      imageUrl: _this.runConfig.page_share_wx_img,
	      path: pageLink
	    };
	  } else {
	    return {
	      path: pageLink
	    };
	  }
	},
	onLoad(options) {
		_this = this;
		
		// 请求服务电话
		this.getSitePhone()
		
		// 隐藏左上角个人中心按钮
		if (options.no_self && options.no_self == 1) {
			this.hideSelfBtn = true
		}
		
		// #ifdef H5
			console.log('准备跳小程序页', options);
			common.webToMiniapp(_this.route, options, 'redirect')
		// #endif
		
		this.getConfig();
		
		systemInfo = uni.getSystemInfoSync();
		setTimeout(function() {
			uni.createSelectorQuery()
				.select('#inputWrapper')
				.boundingClientRect(data => {
					console.log('9999999999999977', systemInfo);
					console.log('9999999999999988', data);
					if (data) {
						_this.mapH = `height:${systemInfo.windowHeight - data.height}px`;
						console.log('地图高度', _this.mapH);
					}
				})
				.exec();
		}, 500);
		this.locationEvent()
		this.mapContext = uni.createMapContext('mapIndex', this)
		console.log('跑腿index页面 onLoad', app.globalData.confirmBack)
		this.updatePageInfo()
	},
	onShow () {
		console.log('返回了')
		this.updatePageInfo()
	},
	methods: {
		getSitePhone(){
			uni.request({
				url:"https://www.jlmkkj.com/appapi.php?c=Mf&a=getSitePhone",
				success(res){
					const tel = res.data.result.tel
					_this.servePhone = tel
				}
			})
			
		},
		callServe(){
			const phone = this.servePhone
			uni.makePhoneCall({
			    phoneNumber: phone
			});
		},
		setWxShare () {
			common.getConfig(function(data){
				let pageLink = `${common.requestDomain}packapp/${common.wxapp_type}/pages/runErrands/index`;
				pageLink = common.addShareParam(pageLink)
				let shareWxLink = pageLink;
				var shareData = {
					title: _this.runConfig.page_share_title,
					desc: _this.runConfig.page_share_desc,
					sendFriendLink: shareWxLink,
					share_img: _this.runConfig.page_share_img
				};
				common.setWxShare(shareData);
			})
		},
		updatePageInfo () {
			// 初始化页面信息
			console.log('跑腿index页面 onShow', app.globalData.confirmBack)
			this.sendType = app.globalData.confirmType
			this.sendTypeCurrentId = app.globalData.sendTypeCurrentId || ''
			this.sendGoods = app.globalData.sendGoods;
			app.globalData.time = '';
			app.globalData.tip = '';
			if (app.globalData.confirmBack) {
				app.globalData.runImgList = null
				app.globalData.confirmBack = false;
				app.globalData.sendStart = this.sendStart = '';
				app.globalData.sendEnd = this.sendEnd = '';
				this.addressMarkers = this.markers = []
				if (this.sendType == '2') {
					this.goodsDesc = app.globalData.buyGoodsDesc || '';
				}
				this.getDeliverList()
			} else if (this.sendType == 3) {
				// 帮我送 3
				console.log('帮我送333 updatePageInfo')
				this.sendStart = app.globalData.sendStart;
				this.sendEnd = app.globalData.sendEnd;
				console.log('帮我送地址信息', app.globalData.sendStart, app.globalData.sendEnd, this.sendGoods, app.globalData.sendGoods)
				if (this.sendStart != '' && this.sendEnd != '' && this.sendGoods != '') {
					this.showAddressTag = false
					uni.navigateTo({
						url: '/pages/runErrands/confirm?lng=' + this.current.lng + '&lat=' + this.current.lat
					})
				} else {
					console.log('帮我送地址信息', app.globalData.sendStart, app.globalData.sendEnd)
					
					if (this.sendStart) {
						this.showAddressTag = false
						let start = {
							longitude: this.sendStart.formartLng,
							latitude: this.sendStart.formartLat,
							iconPath: 'static/images/send.png',
							width: 30,
							height: 30
						}
						this.$set(_this.addressMarkers, 0, start)
					}
					if (this.sendEnd) {
						let end = {
							longitude: this.sendEnd.formartLng,
							latitude: this.sendEnd.formartLat,
							iconPath: 'static/images/end.png',
							width: 30,
							height: 30
						}
						this.$set(_this.addressMarkers, 1, end)
					}
					this.markers = _this.deliverMarkers.concat(_this.addressMarkers)
					if (_this.addressMarkers.length > 0) {
						setTimeout(function(){
							_this.mapContext.includePoints({points: _this.addressMarkers, padding: [10, 10, 10, 10]})
							console.log('选择了起始地址和结束地址',_this.addressMarkers)
						}, 500)
					}
				}
			} else {
				// 帮我买 2
				console.log('帮我买222 updatePageInfo')
				app.globalData.buyGoodsWeight = { weight: 0 };
				app.globalData.buyStart = '';
				app.globalData.buyEnd = '';
				app.globalData.estimatedCost = '';
				app.globalData.selectedShop = {};
				app.globalData.shopAddress ={};
				this.goodsDesc = app.globalData.buyGoodsDesc;
			}
			this.$forceUpdate()
		},
		getUserInfo (e) {
			console.log('获取用户信息')
		},
		mapChange (e) {
			console.log('地图@regionchange事件', e)
			this.isdraging = true
			if (e.detail.type == 'end') {
				this.isdraging = false
				this.mapContext = uni.createMapContext('mapIndex', this)
				console.log('地图@regionchange事件11111111111111111', this.mapContext)
				this.mapContext.getCenterLocation({
					success: function (res) {
						console.log('获取地图中心点成功', res)
						_this.nowMap.center = { lng: res.longitude, lat: res.latitude }
						_this.getDeliverList()
					},
					fail: function (err) {
						console.log('99999999999失败', err)
					},
					complete: function (end) {
						console.log('99999999999完成', end)
					}
				})
			}
		},
		// 选择跑腿方式
		selectType(sendType,cid) {
			this.sendType = sendType;
			app.globalData.confirmType = sendType;
			this.sendTypeCurrentId = cid;
			app.globalData.sendTypeCurrentId = cid;
		},
		// 选择商品类别
		selectGoodsType(index) {
			this.typeNameActive = index;
		},
		// 是否显示“帮我买”弹窗
		clickShowBuyMask(isShow) {
			if (isShow) {
				this.showBuyMask = isShow;
				return;
			}
			this.showBuyMask = !this.showBuyMask;
		},
		// 选择商品标签
		selectGoods(value) {
			if (this.goodsDesc.length > 100) {
				uni.showToast({
					title: common.changeTxt('最多只能输入100个字'),
					icon: 'none'
				})
				return;
			}
			if (this.goodsDesc === '') {
				this.goodsDesc = value;
				app.globalData.buyGoodsDesc = this.goodsDesc;
				return;
			}
			this.goodsDesc += ' ' + value;
			app.globalData.buyGoodsDesc = this.goodsDesc;
			if (app.globalData.selectedShop) {
				app.globalData.selectedShop = null
			}
		},
		// zyl 选择店铺
		selectShop(value) {
			if(value.is_close) {
				uni.showToast({
					title: common.changeTxt('该商铺休息中...'),
					icon: 'none'
				})
			}else {
				app.globalData.selectBuyAddress = false;
				app.globalData.selectedShop = value;
				app.globalData.shopAddress = {
					lng: value.long,
					lat: value.lat,
					formartLat: value.formartLat,
					formartLng: value.formartLng,
					adress: value.adress,
					detail: '',
					name:value.name,
					phone: value.kefu_phone,
					province: value.province_id,
					city: value.city_id,
					area: value.area_id
				}
				app.globalData.buyStart = app.globalData.shopAddress;
				app.globalData.confirmType = '2';
				if (app.globalData.buyGoodsDesc) {
					app.globalData.buyGoodsDesc = ''
				}
				setTimeout(()=>{
					this.checkLogin()
					uni.navigateTo({
						url: '/pages/runErrands/confirm?lng=' + this.current.lng + '&lat=' + this.current.lat
					})
				},100)
			}
			
		},
		// 输入商品信息
		inputGoodsDesc(e) {
			this.goodsDesc = e.detail.value
			if (this.goodsDesc.length >= 100) {
				uni.showToast({
					title: common.changeTxt('最多只能输入100个字'),
					icon: 'none'
				})
			}
			app.globalData.buyGoodsDesc = this.goodsDesc;
		},
		// 打开个人中心
		goMy() {
			this.checkLogin()
			uni.navigateTo({
				url: '/pages/runErrands/my'
			})
		},
		// 获取config
		getConfig() {
			if (!app.globalData.runConfig) {
				common.post('paotui&c=Paotui&a=config', { plugin: true }, res => {
					if (!res.errorMsg) {
						if (res.catList && res.catList.length > 0) {
							_this.sendType = app.globalData.confirmType = res.catList[0].type
							_this.sendTypeCurrentId = app.globalData.sendTypeCurrentId = res.catList[0].cid
						}
						for (let i = 0; i< res.catList.length; i++) {
							if (res.catList[i].type == 2) {
								_this.getBuyGoods()
								break
							}
						}
						_this.runConfig = app.globalData.runConfig = res;
						uni.setNavigationBarTitle({
							title: _this.runConfig.page_title
						})
						
						//#ifdef H5
						_this.setWxShare();
						//#endif
					}
				});
			} else {
				_this.runConfig = app.globalData.runConfig
				console.log('1获取帮我买自定义商品', app.globalData.goodsTypeList)
				_this.goodsTypeList = app.globalData.goodsTypeList
				_this.sendType = app.globalData.confirmType
				_this.sendTypeCurrentId = app.globalData.sendTypeCurrentId = app.globalData.sendTypeCurrentId || _this.runConfig.catList[0].cid
				if (!_this.sendType) {
					_this.sendType = app.globalData.confirmType = _this.runConfig.catList[0].type
				}
				uni.setNavigationBarTitle({
					title: _this.runConfig.page_title
				})
				
				//#ifdef H5
				_this.setWxShare();
				//#endif
			}
		},
		// 获取帮我买自定义商品信息
		getBuyGoods () {
			common.post('paotui&c=Paotui&a=auto_cate_goods', {plugin: true}, (data) => {
				console.log('2获取帮我买自定义商品', data)
				app.globalData.goodsTypeList = _this.goodsTypeList = data
			})
		},
		// 获取附近配送员
		getDeliverList() {
			var param = {
				lng: this.nowMap.center.lng,
				lat: this.nowMap.center.lat
			}
			param.type = 'gcj02'
			param.plugin = true
			param.noTip = true
			common.post('paotui&c=Paotui&a=deliverAround', param, (res) => {
				_this.deliverList = res.returnDeliver;
				if (res.userAdress && res.userAdress.longitude) {
					res.userAdress.lng = res.userAdress.longitude
					res.userAdress.lat = res.userAdress.latitude
					_this.addressTag = res.userAdress;
				}
				
				let markers = []
				res.returnDeliver.map(item => {
					item.iconPath = '/pages/runErrands/static/images/scooter.png'
					item.longitude = item.lng
					item.latitude = item.lat
					item.width = 30
					item.height = 30
					markers.push(item)
					return item
				})
				_this.deliverMarkers = markers
				_this.markers = markers.concat(_this.addressMarkers)
				console.log('3132312', _this.markers)
				_this.$forceUpdate()
				/*if (_this.markers.length > 0) {
					setTimeout(function(){
						_this.mapContext.includePoints({points: _this.markers, padding: [10, 10, 10, 10]})
					}, 500)
				}*/
			})
		},
		// 点击地图右下角定位按钮
		relocation() {
			console.log('点击了重新定位按钮', this.current, this.nowMap.center)
			if (this.current.lng != this.nowMap.center.lng || this.current.lat != this.nowMap.center.lat) {
				this.locationEvent()
			}
		},
		// 获取定位
		locationEvent () {
			common.locationFun((data) => {
				console.log('定位结束，获取到gcj02坐标', data)
				if (data.lng || data.lat) {
					_this.current = data
					_this.nowMap.center = { lng: data.lng, lat: data.lat }
				} else {
					_this.nowMap.center = _this.current
				}
				_this.getDeliverList()
			}, _this, '', 'gcj02')
		},
		// 清除地址
		clearAddress() {
			app.globalData.sendStart = this.sendStart = '';
			if (this.sendEnd != '') {
				app.globalData.sendEnd = this.sendEnd = '';
			}
			this.showAddressTag = true
			_this.addressMarkers = []
			_this.markers = []
			_this.nowMap.center = _this.current
			_this.getDeliverList()
		},
		// 点击地址弹层
		selectAddressTag() {
			this.showAddressTag = false
			app.globalData.sendStart = this.sendStart = this.addressTag;
			this.nowMap.center = { lng: this.sendStart.longitude, lat: this.sendStart.latitude };
			let start = {
				longitude: _this.sendStart.formartLng,
				latitude: _this.sendStart.formartLat,
				iconPath: 'static/images/send.png',
				width: 30,
				height: 30
			}
			this.$set(_this.addressMarkers, 0, start)
			this.getDeliverList()
		},
		// 检验是否登录
		checkLogin () {
			if (!app.globalData.is_login) {
				_this.user_options = {
					toLogin: true
				};
				return
			} 
		},
		// 点击 下单按钮
		buyGoConfirm(type) {
			if (type === 'judge') {
				this.showBuyMask = true;
				return;
			}
			this.checkLogin()
			app.globalData.selectedShop = {};
			app.globalData.shopAddress ={};
			app.globalData.confirmType = '2';
			app.globalData.selectBuyAddress = false;
			uni.navigateTo({
				url: '/pages/runErrands/confirm?lng=' + this.current.lng + '&lat=' + this.current.lat
			})
		}
	
	},
	components: {
		RTitle,
		AddressInput,
		SelectGoods,
		ShopItem,
	}
};
</script>

<style lang="stylus" scoped>
.mf-call-phone	
	position fixed
	top 65%
	right 30upx
	z-index 9999
	background-color #00c78c
	color #fff
	padding 6upx 20upx
	font-size 14px
	border-radius 4px
.m-detection
	z-index 1
	position absolute
	left 20upx
	bottom 580upx
	display flex
	align-items center

.detec-img
	 position relative
	 z-index 1
	 width 60upx
	 height 60upx
	 background-image url('')
	 background-position left center
	 background-repeat no-repeat
	 background-size 60upx
		
.m-detec-msg
	height 44upx
	line-height 44upx
	font-size 14px
	color #fff
	background-color #00c78c
	padding-right 28upx
	padding-left 65upx
	margin-left -50upx
	border-radius 50upx
	
.m-map-index
	width 100%
	height 100%
.home-content
	height calc(100vh)
	overflow hidden
	position relative
	.map-box
		z-index 0
		position relative
		height 100vh
		.icon-gerenzhongxin
			display none
			position absolute
			top 10px
			left 10px
			width 34px
			height 34px
			line-height 34px
			font-size 18px
			color #555
			background #fff
			text-align center
			border-radius 50%
			box-shadow 1px 2px 5px #ccc
		.center-icon
			position absolute
			top 50%
			left 50%
			margin-left -15px
			margin-top -15px
			width 30px
			height 30px
			background-image url('static/images/location_my.png')
			background-size 100%
		.center-desc
			position absolute
			top 30%
			left 50%
			margin-left -44px
			margin-top -67px
			width 80px
			background rgba(0, 0, 0, 0.7)
			color #fff
			font-size 12px
			border-radius 5px
			line-height 1.4
			padding 5px
			white-space pre-wrap
		.icon-sanjiaoB
			position absolute
			top 50%
			left 50%
			margin-left -13px
			margin-top -39px
			color rgba(0, 0, 0, 0.7)
			font-size 28px
		.re-location
			position absolute
			bottom 20px
			right 10px
			background #fff
			width 34px
			height 34px
			display flex
			align-items center
			justify-content center
			border-radius 50%
			box-shadow 1px 2px 5px #ccc
			.img
				width 75%
				height 26px
		.clear-address
			position absolute
			bottom 20px
			left 0
			background #fff
			font-size 14px
			padding 8px 10px 8px 5px
			border-radius 0 20px 20px 0
			border 1PX solid #ddd
			color #000
			box-shadow 1px 2px 5px #ddd
			display flex
			align-items center
			&.active
				display inline-block
			.iconfont
				margin-right 4px
	.input-wrapper
		position absolute
		bottom 20upx
		left 20upx
		right 20upx
		border-radius 30upx
		box-shadow 0 0 20upx #ccc
		background-color #fff
		padding-top 20upx
		padding-bottom calc(10px + env(safe-area-inset-bottom))
		padding-bottom calc(10px + constant(safe-area-inset-bottom))
		.input-box
			.title
				text-align center
				font-size 16px
				font-weight 500
				padding 18px 0
				.item
					padding 20upx 13px
					position relative
					&.active
						font-weight bold
					&.active::after
						content ''
						width 70upx
						height 3px
						border-radius 20upx
						background #04b7a5
						position absolute
						bottom 0px
						left 0
						right 0
						margin auto
			.tab-content
				padding 0 10px
				height 194px
				.buy-box
					height 100%
					display flex
					flex-direction column
					.text-box
						flex-grow 1
					.icon-box
						flex-shrink 0
.buy-box
	background #fff
	letter-spacing 1px
	.text-box
		position relative
		display flex
		justify-content space-between
		padding 15px 0 0 15px
		height 122px
		box-sizing border-box
		border-bottom 1px solid #d8d8d8 
		.text
			font-size 15px
			padding-right 10px
			line-height 1.3
			width 100%
			overflow-y auto
			color #333
			&::-webkit-scrollbar
				width 0 !important
			.placeholder
				color #999
			.input-goods
				position relative
				z-index 0
				width 100%
				height 100%
				letter-spacing 1px
				line-height 1.3
				resize none
		.btn
			position absolute
			right 0
			bottom 37upx
			width 110upx
			height 110upx
			line-height 110upx
			text-align center
			font-size 16px
			font-weight bold
			color #fff
			background #00c78c
			border-radius 50%
			box-shadow 1px 2px 8px rgba(0, 0, 20upx, 0.3)
			align-self center
	.icon-box
		display flex
		color #999
		font-size 12px
		text-align center
		padding 10px 0
		line-height 1.4
		.item
			width 20%
			.img-box
				.img
					width 20px
					height 20px
.buy-mask
	z-index 2
	position absolute
	top 178upx
	left 0
	right 0
	bottom 0
	background #f1f1f1
	padding 10px
	display none
	box-sizing border-box
	.buy-box
		border-radius 10upx
		.text-box
			border none
	&.active
		display block
	.cancel
		width 30px
		height 30px
		background #fff
		border-radius 50%
		margin-bottom 10px
		box-shadow 0 0 5px 2px #ddd
		display flex
		align-items center
		justify-content center
		.icon
			font-size 18px
			font-weight bold
	.buy-box
		padding 10px
		height -webkit-calc(100% - 60px)
		height calc(100% - 60px)
		.text-box
			padding 0 0 0 10px
			.input-goods
				font-size 15px
		.type-box
			margin-top 10px
			height -webkit-calc(100% - 132px)
			height calc(100% - 132px)
			overflow hidden
			background-color #FFFFFF
			.title
				display flex
				justify-content space-between
				margin 0 30upx
				font-size 14px
				text-align center
				margin-bottom 12px
				border-bottom 1px solid #bebebe
				.item
					padding-top 10upx 
					padding-bottom 30upx
					position relative
					box-sizing border-box
					letter-spacing 0px
					&.active
						font-weight bold
					&.active::after
						content ''
						position absolute
						bottom -4upx
						left 0
						right 0
						margin auto
						height 8upx
						width 60upx
						background #04b7a5
						border-radius 8upx
			.list
				display flex
				flex-wrap wrap
				padding-left 10px
				max-height -webkit-calc(100% - 42px)
				max-height calc(100% - 42px)
				overflow auto
				.item
					font-size 14px
					color #aaaaaa
					background #efefef
					margin 0 12px 12px 0
					padding 6px 10px
					border-radius 15px
					display inline-block
					vertical-align top
				.shop-tips
					width 100%
					text-align center
					font-size 10px
					margin 5px 0 15px 0
					color #999999
					width 100%
					height 30px
					line-height 30px
				.shop-list
					flex-basis 49%
					max-width 49%
					margin-bottom 10px
					margin-right 1%
					// height 60px
					border-radius 3px
						
</style>
>
